<template>
	<navigatorComp title="讣告" bgcColor="#121512" fontColor="#fff">
		<template #rightWrap>
			<view class="edit" @click="goUrl('/subPages/home/obituary/content')">我发布的</view>
		</template>
	</navigatorComp>

	<view class="content">
		<!-- 输入信息 -->
		<view class="obituary_input_box">
			<image
				@click="uploadDeadee"
				class="obituary_avater"
				:src="
					formData.decedentHeadUrl ||
					'http://112.124.50.179:8888/imgs/home/obituary_avater.png'
				"
			></image>
			<view class="uploadText" @click="uploadDeadee">点击上传遗像</view>

			<u-form label-width="120" :label-style="obj" :model="formData" ref="uForm">
				<u-form-item label="逝者姓名:" prop="name" required>
					<u-input
						v-model.trim="formData.decedentName"
						border="none"
						placeholder="请输入逝者姓名"
						clearable
						maxlength="6"
					/>
				</u-form-item>
				<u-form-item label="逝者年龄:" prop="age" required>
					<u-input
						v-model.trim="formData.decedentAge"
						type="number"
						border="none"
						placeholder="请输入逝者年龄"
						clearable
					/>
				</u-form-item>
				<u-form-item label="逝者称谓:" prop="call" required>
					<view
						@click="openCall"
						:class="['placeHolder', formData.decedentTitle && 'value']"
					>
						{{ formData.decedentTitle || '请选择逝者称谓' }}
					</view>
					<image
						class="arrow_right"
						src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
						mode=""
						@click="openCall"
					></image>
				</u-form-item>
				<u-form-item label="逝世日期:" prop="date" required>
					<view
						:class="['placeHolder', formData.date && 'value']"
						@click="
							show1 = true;
							chooseDate = formData.decedentTime || new Date();
						"
					>
						<text style="color: #fff" v-if="formData.decedentTime">
							{{ formData.decedentTime }}
						</text>
						<text v-else>请选择逝世日期</text>
					</view>
					<image
						class="arrow_right"
						src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
						mode=""
					></image>
					<up-datetime-picker
						:minDate="new Date('1920/1/1').getTime()"
						:maxDate="new Date().getTime()"
						:show="show1"
						v-model="chooseDate"
						mode="date"
						:formatter="formatter"
						@cancel="show1 = false"
						@confirm="confirm($event, 1)"
					></up-datetime-picker>
				</u-form-item>
				<u-form-item label="逝世地点:" prop="location">
					<u-input
						v-model="formData.decedentAddr"
						border="none"
						placeholder="请输入逝世地点"
						clearable
					/>
				</u-form-item>
				<u-form-item label="追悼日期:" prop="memorialdata" required>
					<view
						:class="['placeHolder', formData.memorialdata && 'value']"
						@click="show2 = true"
					>
						<text style="color: #fff" v-if="formData.mournTime">
							{{ formData.mournTime }}
						</text>
						<text v-else>请选择追悼日期</text>
					</view>
					<image
						class="arrow_right"
						src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
						mode=""
					></image>
					<up-datetime-picker
						:minDate="new Date().getTime()"
						:show="show2"
						v-model="formData.mournTime"
						mode="date"
						:formatter="formatter"
						@cancel="show2 = false"
						@confirm="confirm($event, 2)"
					></up-datetime-picker>
				</u-form-item>
				<u-form-item label="追悼地址:" prop="memorialLoc" required>
					<u-input
						v-model="formData.mournAddr"
						border="none"
						placeholder="请输入追悼地址"
						clearable
					/>
				</u-form-item>
				<u-form-item label="代表姓名:" prop="representative" required>
					<u-input
						v-model="formData.familyName"
						border="none"
						placeholder="请输入代表姓名"
						clearable
					/>
				</u-form-item>
				<u-form-item label="联系电话:" prop="phone">
					<u-input
						type="number"
						v-model="formData.familyPhone"
						border="none"
						placeholder="请输入联系电话"
						maxlength="11"
						clearable
					/>
				</u-form-item>
				<u-form-item label="讣告背景模版:" prop="bgc" required>
					<view
						@click="bgcPopup.show = true"
						:class="['placeHolder', formData.backgroundId && 'value']"
					>
						{{ formData.backgroundId || '请选择模板' }}
					</view>
					<image
						class="arrow_right"
						src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
						mode=""
						@click="bgcPopup.show = true"
					></image>
				</u-form-item>
			</u-form>
		</view>

		<!-- 弹框 -->
		<!-- 选择称谓弹框 -->
		<myPopup
			v-model:show="callPopup.show"
			title="选择称谓"
			bgColor="#1E201F"
			fontColor="#fff"
			height="760rpx"
			@closeCallback="closeCall_callback"
		>
			<view style="padding: 32rpx">
				<view class="callList">
					<view
						@click="chooseCall(item)"
						v-for="(item, index) in callPopup.callList"
						:class="['call', callPopup.choosedCall == item ? 'call_active' : '']"
					>
						{{ item }}
					</view>
					<view
						:class="['call', callPopup.designCall.isDesign && 'call_active']"
						@click="chooseDesignCall"
					>
						自定义称谓
					</view>
				</view>
				<div class="inputCall" v-if="callPopup.designCall.isDesign">
					<u-input
						v-model.trim="callPopup.designCall.content"
						border="none"
						placeholder="请输入称谓"
						clearable
						:label-style="obj"
						custom-style="background:#333333;padding:24rpx;font-size: 28rpx;color: #ffffff;"
					/>
				</div>
			</view>
			<footerBtn bgcColor="#1E201F" name="确定" @clickBtn="confirmCall"></footerBtn>
		</myPopup>

		<!-- 选择模板弹框 -->
		<myPopup
			v-model:show="bgcPopup.show"
			title="选择讣告模版"
			bgColor="#1E201F"
			fontColor="#fff"
		>
			<view style="padding: 32rpx">
				<view class="templateList">
					<div
						class="template"
						v-for="(item, index) in bgcPopup.bgcList"
						@click="chooseBgc(index)"
					>
						<image
							:class="[formData.backgroundId == '经典' + (index + 1) && 'active']"
							src="http://112.124.50.179:8888/imgs/home/empty.png"
							mode=""
						></image>
						<view>经典{{ index + 1 }}</view>
					</div>
				</view>
			</view>
		</myPopup>
	</view>

	<footerBtn
		v-if="!isEdit"
		bgcColor="#121512"
		:btnDisable="!btnDisable"
		name="生成讣告"
		@clickBtn="createObituary"
	></footerBtn>
	<footerBtn v-if="isEdit" bgcColor="#121512" name="更新" @clickBtn="createObituary"></footerBtn>
</template>

<script setup>
import { computed, ref, reactive, getCurrentInstance } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import footerBtn from '/components/footerBtn/index.vue';
import myPopup from '/components/popup/index.vue';
import { timeFormat } from '@/node_modules/uview-plus';
import { onReady, onShow, onLoad } from '@dcloudio/uni-app';
import HomeApi from '@/API/home/index.js';
import _ from 'lodash';
const chooseDate = ref(new Date());
onLoad((o) => {
	if (o.id) {
		homeApi
			.queryBituaryApi({
				id: o.id
			})
			.then((res) => {
				formData.decedentName = res.data.obituary.decedentName;
				formData.decedentAge = res.data.obituary.decedentAge;
				formData.decedentTitle = res.data.obituary.decedentTitle;
				formData.decedentHeadUrl = res.data.obituary.decedentHeadUrl;
				formData.decedentTime = res.data.obituary.decedentTime;
				formData.decedentAddr = res.data.obituary.decedentAddr;
				formData.mournAddr = res.data.obituary.mournAddr;
				formData.mournTime = res.data.obituary.mournTime;
				formData.familyName = res.data.obituary.familyName;
				formData.familyPhone = res.data.obituary.familyPhone;
				formData.backgroundId = res.data.obituary.backgroundId;
				formData.memorialId = res.data.obituary.memorialId;
				formData.id = o.id;
				isEdit.value = true;
			})
			.catch(() => {});
	}
});
const homeApi = new HomeApi();
const obj = reactive({
	'font-size': '28rpx',
	color: '#FFFFFF'
});
const proxy = getCurrentInstance();
const $chooseImg = proxy.appContext.config.globalProperties.$chooseImg;
const show1 = ref(false);
const show2 = ref(false);
const isEdit = ref(false);
const formData = reactive({
	decedentName: '',
	decedentAge: '',
	decedentTitle: '',
	decedentHeadUrl: '',
	decedentTime: '',
	decedentAddr: '',
	mournAddr: '',
	mournTime: '',
	familyName: '',
	familyPhone: '',
	backgroundId: '0',
	memorialId: '0'
});
const btnDisable = computed(() => {
	let allFilled = true;
	for (const key in formData) {
		if (formData[key] == '' && key != 'decedentAddr' && key != 'familyPhone') {
			allFilled = false;
			break;
		}
	}
	return allFilled;
});

// 称谓弹框
const callPopup = reactive({
	show: false,
	designCall: {
		isDesign: false,
		content: ''
	},
	choosedCall: '',
	callList: [
		'慈父',
		'慈母',
		'吾夫',
		'吾妻',
		'先祖父',
		'先祖母',
		'先外祖父',
		'先外祖母',
		'先兄',
		'先姐',
		'先弟',
		'先妹'
	]
});

//讣告背景模板弹框
const bgcPopup = reactive({
	show: false,
	choosedBgc: '',
	bgcList: [1, 2, 3]
});

function formatDate(dateString) {
	const date = new Date(dateString);
	const year = date.getFullYear();
	const month = date.getMonth() + 1;
	const day = date.getDate();
	return `${year}年${month}月${day}日`;
}
/**
 * 打开称谓弹框
 */
const openCall = () => {
	callPopup.show = true;
	if (formData.decedentTitle) {
		if (callPopup.callList.indexOf(formData.decedentTitle) === -1) {
			//为自定义称谓
			callPopup.designCall = {
				isDesign: true,
				content: formData.decedentTitle
			};
		} else {
			callPopup.choosedCall = formData.decedentTitle;
		}
	}
};
/**
 * 称谓弹框-选择称谓
 */
const chooseCall = (call) => {
	callPopup.choosedCall = call;
	callPopup.designCall = {
		isDesign: false,
		content: ''
	};
};
/**
 * 称谓弹框-选择自定义称谓
 */
const chooseDesignCall = () => {
	callPopup.designCall.isDesign = true;
	callPopup.choosedCall = '';
};
/**
 * 称谓弹框-点击确定
 */
const confirmCall = () => {
	if (callPopup.designCall.isDesign && callPopup.designCall.content) {
		formData.decedentTitle = callPopup.designCall.content;
	} else if (callPopup.choosedCall) {
		formData.decedentTitle = callPopup.choosedCall;
	} else {
		uni.showToast({
			url: '请选择称谓！',
			icon: 'none'
		});
	}
	callPopup.show = false;
};
/**
 * 称谓弹框-取消弹框
 */
const closeCall_callback = () => {
	callPopup.designCall = {
		isDesign: false,
		content: ''
	};
	callPopup.choosedCall = '';
};
/**
 * 背景模板弹框-选择背景模板
 */
const chooseBgc = (index) => {
	formData.backgroundId = '经典' + (index + 1);
	bgcPopup.show = false;
};

/**
 * 点击上传遗像
 */
const uploadDeadee = () => {
	$chooseImg
		.chooseImg({
			formData: {
				fileType: 'image',
				fileDirType: 'obituary'
			},
			countLimit: 1
		})
		.then((res) => {
			formData.decedentHeadUrl = JSON.parse(res[0].img_url.data).fileUrl;
		});
};

const validate = () => {
	if (formData.decedentAge < 1 || formData.decedentAge > 120) {
		uni.showToast({
			icon: 'none',
			title: '年龄应当在1~120之间'
		});
		return false;
	}
	return true;
};

const handleCreateObituary = _.debounce(
	() => {
		createObituary();
	},
	2000,
	{ leading: true, trailing: false }
);

/**
 * 点击生成讣告
 */
const createObituary = () => {
	uni.showLoading();
	if (!isEdit.value) {
		if (!validate()) {
			return;
		}
		let params = {
			...formData,
			decedentTime: formData.decedentTime + ' 00:00:00',
			mournTime: formData.mournTime + ' 00:00:00'
		};
		homeApi
			.createBituaryApi(params)
			.then((res) => {
				uni.showToast({
					icon: 'none',
					title: '创建成功'
				});
				setTimeout(() => {
					goUrl(
						`/subPages/home/obituary/poster?id=${res.data.id}&&formData=` +
							JSON.stringify(formData)
					);
					formData.decedentName = '';
					formData.decedentAge = '';
					formData.decedentTitle = '';
					formData.decedentHeadUrl = '';
					formData.decedentTime = '';
					formData.decedentAddr = '';
					formData.mournAddr = '';
					formData.mournTime = '';
					formData.familyName = '';
					formData.familyPhone = '';
					formData.backgroundId = '0';
					formData.memorialId = '0';
				}, 1000);
				console.log(formData);
			})
			.catch(() => {});
	} else {
		homeApi
			.updateBituaryApi(formData)
			.then((res) => {
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
				setTimeout(() => {
					goUrl(
						`/subPages/home/obituary/poster?id=${res.data.id}&&formData=` +
							JSON.stringify(formData)
					);
				}, 1000);
			})
			.catch(() => {});
	}
	uni.hideLoading();
};
const confirm = (e, num) => {
	if (num == 1) {
		formData.decedentTime = timeFormat(e.value, 'yyyy-mm-dd');
		show1.value = false;
	} else {
		formData.mournTime = timeFormat(e.value, 'yyyy-mm-dd');
		show2.value = false;
	}
};
const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	return value;
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.content {
	background-color: #121512;
	padding: 0;
}

.edit {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

.obituary_input_box {
	margin: 40rpx 32rpx;
	height: 1050rpx;
	background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 32rpx 0 40rpx;
	box-sizing: border-box;

	.obituary_avater {
		width: 132rpx;
		height: 176rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;
	}

	.uploadText {
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 28rpx;
		margin-bottom: 48rpx;
	}

	.obituary_input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .u-form {
		width: 100%;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	::v-deep .input-placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999 !important;
		line-height: 33rpx;
		text-align: right;
	}

	::v-deep .uni-input-input {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		text-align: right;
	}

	::v-deep .u-form-item__body__right__content__slot {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		margin-bottom: 32rpx !important;
	}

	.placeHolder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		text-align: right;
	}

	.value {
		color: #ffffff;
	}

	.arrow_right {
		width: 40rpx;
		height: 40rpx;
	}
}

.callList {
	display: flex;
	flex-wrap: wrap;
	margin-right: -20rpx;

	.call {
		padding: 0 24rpx;
		min-width: 160rpx;
		box-sizing: border-box;
		height: 60rpx;
		background: #333333;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 60rpx;
		text-align: center;
		margin-right: 16rpx;
		margin-bottom: 24rpx;
	}

	.call_active {
		background-color: #f3e0bb;
		color: #0e0e0e;
	}
}

.inputCall {
	::v-deep .uni-input-input {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff !important;
		line-height: 33rpx;
	}
}

.templateList {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-right: -32rpx;

	.template {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 32rpx;
		margin-bottom: 56rpx;
	}

	image {
		width: 208rpx;
		height: 276rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 32rpx;
		margin-bottom: 24rpx;
		box-sizing: border-box;
	}

	.active {
		border: 4rpx solid #fbc438;
	}
}
</style>
